<template>
	<view class="flex flex-col">
		<view v-if="props.model=='line'" class="ma-32">
			<view v-for="item in props.rows" :key="item" class="flex flex-col">
				<tm-skeleton-line :height="props.height"></tm-skeleton-line>
			</view>
			<view class="flex flex-row">
				<view class="flex-2">
					<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
				</view>
				<view class="flex-2 mx-24">
					<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
				</view>
				<view class="flex-2 mr-24">
					<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
				</view>
				<view class="flex-4 ">
					<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
				</view>
			</view>
		</view>

		<view v-if="props.model=='rect'" class="ma-32">
			<view v-for="item in props.rows" :key="item" class="flex flex-row">
				<view class="flex-2">
					<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
				</view>
				<view class="flex-4 mx-24">
					<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
				</view>
				<view class="flex-2 mr-24">
					<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
				</view>
				<view class="flex-2 ">
					<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
				</view>
			</view>
		</view>

		<view v-if="props.model=='card'" class="ma-32">
			<view class="flex flex-row">
				<view class="flex-1">
					<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				</view>
				<view class="flex-10 mx-24">
					<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				</view>
				<view class="flex-1">
					<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				</view>
			</view>
			<view class="">
				<tm-skeleton-line :height="props.height*4"></tm-skeleton-line>
			</view>
			<view class="flex flex-row">
				<view class="flex-2">
					<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				</view>
				<view class="flex-4 mx-24">
					<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				</view>
				<view class="flex-2 mr-24">
					<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				</view>
				<view class="flex-2 ">
					<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				</view>
			</view>
		</view>
		<view v-if="props.model=='chat'" class="flex flex-row ma-32">
			<view class="flex-2" :style="[{height:props.height*2+'rpx'}]">
				<tm-skeleton-line :height="props.height*2"></tm-skeleton-line>
			</view>
			<view class="flex-8 mx-24">
				<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				<tm-skeleton-line :height="props.height"></tm-skeleton-line>
				<tm-skeleton-line :height="props.height"></tm-skeleton-line>
			</view>


		</view>

	</view>
</template>

<script lang="ts" setup>
	/**
	 * 骨架屏
	 * @description 骨架加载状态屏，用来展示数据前的一种加载状态。预设了：line ,rect,card,chat四种类型，如果想要更好的自定义请使用tm-skeleton-line组件自行组合。
	 */
	import tmSkeletonLine from "../tm-skeleton-line/tm-skeleton-line.vue";
	const props = defineProps({
		height: {
			type: Number,
			default: 60
		},
		rows: {
			type: Number,
			default: 3
		},
		model: {
			type: String,
			default: 'line' //line ,rect,card,chat,
		}
	})
</script>

<style>

</style>
